<template>
   <div class="side-bar-item" @click="itemClick">

    <!-- 左图标 -->
     <div>
        <slot name="item-icon"></slot>
     </div>

     <!-- 右文字 -->
     <div>
        <slot name="item-text"></slot>
     </div>

     <!-- 右点击箭头 -->
     <div v-if="!isActive">
        <slot name="item-icon2"></slot>
    </div>

    <div v-else>
        <slot name="item-icon2-active"></slot>
    </div>

   </div>
</template>

<script>
export default {
   name: 'sideBarItem',
   components: {
     
   },
   mixins: [],
   props: {
    path: String,
   },
   data() {
     return {
       
     }
   },
   computed: {
     isActive() {
        // 动态判断当前的path和正在活跃的path一不一样
        return this.$route.path.indexOf(this.path)
     }
   },
   watch: {
     
   },
   mounted() {
     
   },
   methods: {
    itemClick() {
        console.log(this.path)
        this.$router.replace(this.path).catch((err) => err)
        // this.isActive = !this.isActive
    }
   }
};
</script>

<style>
.side-bar-item {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.side-bar-item img{
    flex: 1;
    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    /*去掉图片自然所有的3px */
    margin-bottom: 2px;
    padding-right: 10px;
    padding-left: 10px;
}



.side-bar-item div {
    flex: 1;
    width: 103px;

    /* 水平垂直居中 */
    text-align: center;
    line-height: 50px;

    height: 50px;
    font-family: 'PMZD';
    color: #fff;
    
}

</style>